<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Maintain</title>
    <script  type="text/javascript" src="./js/vue/vue.js"></script>
    <script type="text/javascript" src="./js/vue/vue-router.js"></script>
    <!--<script src="./js/maintain.js"></script>-->
    <script src="./js/jquery/2.0.0/jquery.min.js"></script>
    <link rel="stylesheet" href="./css/bootstrap/3.3.6/bootstrap.css">
    <script src="./js/bootstrap/3.3.6/bootstrap.min.js"></script>
    <link rel="stylesheet" href="./css/maintain.css">
</head>
<body>
    <div id="app">
        <nav-column></nav-column>
        <router-view></router-view>
    </div>
    <template id="nav-tem">
        <div id="nav-div" class="list-group">
            <p class="list-group-item active">管理人员选项</p>
            <router-link to="/locker" class="list-group-item"><span class="glyphicon glyphicon-lock"></span>储物柜管理</router-link>
            <router-link to="/statistics" class="list-group-item"><span class="glyphicon glyphicon-object-align-bottom"></span>统计查询</router-link>
            <router-link to="/status" class="list-group-item"><span class="glyphicon glyphicon-cog"></span>运行状态</router-link>
            <router-link to="/maintaindata" class="list-group-item"><span class="glyphicon glyphicon-wrench"></span>维护情况</router-link>

            <a v-on:click="showItems()" class="list-group-item"><span class="glyphicon glyphicon-signal"></span>基础数据管理</a>

            <router-link to="/maintainer" class="list-group-item hidden-item" style="display:none"><span class="glyphicon glyphicon-user"></span>维护人员数据</router-link>
            <router-link to="/standard" class="list-group-item hidden-item" style="display:none"><span class="glyphicon glyphicon-yen"></span>收费标准</router-link>
            <router-link to="/locale" class="list-group-item hidden-item" style="display:none"><span class="glyphicon glyphicon-map-marker"></span>投放地管理</router-link>
        </div>
    </template>
    <template id="welcome-tem">
        <div>
            Welcome
        </div>
    </template>
    <template id="locker-data">
        <div class="table-div">
            <div class="input-div">
                <span>
                    <label>投放地</label>
                    <input type="text">
                </span>
                <span>
                    <label>编号</label>
                    <input type="text">
                </span>
                <button class="btn btn-info"><label class="glyphicon glyphicon-search"></label>搜索</button>
                <button class="btn btn-success"><label class="glyphicon glyphicon-plus"></label>添加</button>
            </div>
            <table class="table table-striped table-hover">                                                    
                <tr>
                    <th>编号</th>
                    <th>类型</th>
                    <th>投放地</th>
                    <th>方案名</th>
                    <th>容量（大）</th>
                    <th>容量（小）</th>
                    <th>启用状态</th>
                    <th>连接状态</th>
                    <th>操作</th>
                </tr>
                <tr>
                    
                </tr>
            </table>
        </div>
    </template>
    <template id="statistics-data">
        <div class="table-div">
            <div>
                <span>
                    <label>投放地</label>
                    <input type="text">
                </span>
                <span>
                    <label>开始日期</label>
                    <input type="text">
                </span>
                <span>
                    <label>结束日期</label>
                    <input type="text">
                </span>
                <button class="btn btn-info"><label class="glyphicon glyphicon-search"></label>搜索</button>
            </div>
            <table class="table table-striped table-hover">
                <tr>
                    <th>编号</th>
                    <th>日期</th>
                    <th>投放地</th>
                    <th>容量（大）</th>
                    <th>容量（小）</th>
                    <th>使用次数（大）</th>
                    <th>使用次数（小）</th>
                    <th>收入（大）</th>
                    <th>收入（小）</th>
                    <th>总收入</th>
                </tr>
            </table>
        </div>
    </template>
    <template id="status-data">
        <div>StatusData</div>
    </template>
    <template id="maintain-data">
        <div class="table-div">
            <div>
                <span>
                    <label>投放地</label>
                    <input type="text">
                </span>
                <span>
                    <label>编号</label>
                    <input type="text">
                </span>
                <button class="btn btn-info"><label class="glyphicon glyphicon-search"></label>查询</button>
            </div>
            <table class="table table-striped table-hover">
                <tr>
                    <th>编号</th>
                    <th>投放地</th>
                    <th>日期</th>
                    <th>维修人员</th>
                </tr>
            </table>
        </div>
    </template>
    <template id="maintainer-data">
        <div class="table-div">
            <button class="btn btn-success"><span class="glyphicon glyphicon-plus"></span>添加</button>
            <table class="table table-striped table-hover">
                <th>维护人员名称</th>
                <th>身份证号</th>
                <th>投放地</th>
                <th>操作</th>
            </table>
        </div>
    </template>
    <template id="standard-data">
        <div class="table-div">
            <button class="btn btn-success"><span class="glyphicon glyphicon-plus"></span>添加</button>
            <table class="table table-striped table-hover">
                <tr>
                    <th>方案名</th>
                    <th>时费（大）</th>
                    <th>上限（大）</th>
                    <th>时费（小）</th>
                    <th>上限（小）</th>
                    <th>操作</th>
                </tr>
            </table>
        </div>
    </template>
    <template id="locale-data">
        <div class="table-div">
            <button class="btn btn-success"><span class="glyphicon glyphicon-plus"></span>添加</button>
            <table class="table table-striped table-hover">
                <tr>
                    <th>投放地名称</th>
                    <th>备注</th>
                    <th>操作</th>
                </tr>
            </table>
        </div>
    </template>
    <script>
        var navigation = Vue.component('nav-column', { 
            template: '#nav-tem',
            methods: {
                showItems: function() {
                    $('.hidden-item').slideToggle()
                }
            }
        })
        var MaintainWelcome = { template: '#welcome-tem' }
        var LockerData = { template: '#locker-data'}
        var StatisticsData = { template: '#statistics-data' }
        var StatusData = { template: '#status-data' }
        var MaintainData = { template: '#maintain-data' }
        var BasicData = { template: '#basic-data' }
        var MaintainerData = { template: '#maintainer-data' }
        var StandardData = { template: '#standard-data' }
        var LocaleData = { template: '#locale-data' }
        const routes = [
            { path: '/', component: MaintainWelcome },
            { path: '/locker', component: LockerData },
            { path: '/statistics', component: StatisticsData },
            { path: '/status', component: StatusData },
            { path: '/maintaindata', component: MaintainData },
            { path: '/basic', component: BasicData },
            { path: '/maintainer', component: MaintainerData },
            { path: '/standard', component: StandardData },
            { path: '/locale', component: LocaleData },
        ]
        const router = new VueRouter({ routes });
        const app = new Vue({ router }).$mount('#app');
    </script>
</body>
</html>